
<script setup>
import { ref } from 'vue';
import $data from 'xcore/data';
import $cmpnt from 'xcore/cmpnt';
import $utils from 'xcore/utils';

// 状态管理
const editPath = ref(false);
const activeTab = ref('menu');
const expandKeys = ref([]);
const currentNode = ref({});
const menuLabel = ref('');

// 表单和对话框状态
const dialogVisible = ref(false);
const form = ref({
    pid: "",
    label: '',
    path: '',
    icon: ''
});

// 菜单数据和树属性
const menus = ref([]);
const props = ref({
    checkStrictly: true,
    value: 'id',
    label: 'label',
    children: 'children'
});

// 表单验证规则
const rules = ref({
    label: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
});

// 图标组件设置
const iconCmpnt = $cmpnt.find("faIconSelect").clone();
iconCmpnt.props.valueKey = "icon";
iconCmpnt.events.change = (e) => {
    form.value.icon = e;
};

// 加载菜单数据
const loadMenu = async () => {
    menus.value = await $data.provider.menu.getAll();
    setExpandKeys(menus.value);
};
loadMenu();

// 设置展开的键
const setExpandKeys = (data) => {
    expandKeys.value = data
        .filter(item => item.expand)
        .map(item => item.id);
    data.forEach(item => {
        if (item.children && item.children.length) {
            setExpandKeys(item.children);
        }
    });
};

// 处理对话框关闭
const handleClose = (done) => {
    resetForm();
    done();
};

// 重置表单
const resetForm = () => {
    form.value = { pid: "", label: '', path: '', icon: '' };
};

// 表单引用和提交处理
const formRef = ref(null);
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            const postForm = { ...form.value };
            console.log("submit", postForm);
            $data.provider.menu.save(postForm).then(() => {
                menuLabel.value = "";
                loadMenu();
            });
        }
    });
};

// 清除表单
const clear = () => {
    resetForm();
    menuLabel.value = "";
};

// 添加新菜单项
const append = (data) => {
    currentNode.value = data;
    resetForm();
    menuLabel.value = "新增子菜单";
    activeTab.value = "menu";
};

// 更新现有菜单项
const update = (data) => {
    form.value = { ...data };
    console.log("update", data);
    menuLabel.value = "编辑菜单";
    activeTab.value = "menu";
};

// 移除菜单项
const remove = (data) => {
    $data.provider.menu.remove(data.id).then(() => {
        loadMenu();
    });
};
</script>

<template>
    <div>
       
        <el-button text type="info" @click="dialogVisible = true; menuLabel = ''">
            <slot>菜单管理</slot>
        </el-button>


        <el-dialog append-to-body top="8%" v-model="dialogVisible" :close-on-click-modal="false" draggable title="菜单管理"
            width="70%" :before-close="handleClose" @close="resetForm">
            <el-row :gutter="60">
                <el-col :span="8">
                    <el-tree style="height: 400px;" class="overflow-y-auto" :data="menus" node-key="id" :props="props"
                        :default-expanded-keys="expandKeys" @node-click="handleNodeClick">
                        <template #default="{ node, data }">
                            <span class="tree-label d-flex justify-content-between align-items-center w-75">
                                <span>
                                    <i class="text-success me-1" v-if="data.icon" :class="data.icon"></i>
                                    <span @click="update(data)">{{ node.label }}</span>
                                </span>

                                <span class="d-flex justify-content-between align-items-center opacity-0">
                                    <i class="mx-1 iconfont te-i-edit " @click="update(data)"> </i>
                                    <i v-if="data.level < 3" class="mx-1 iconfont te-i-add" @click="append(data)"> </i>
                                    <i v-if="!data.children || data.children.length == 0"
                                        class="mx-1 iconfont te-i-delete" @click="remove(data)"> </i>
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </el-col>

                <el-col :span="12">
                    <el-tabs v-model="activeTab">
                        <el-tab-pane v-if="menuLabel" :label="menuLabel" name="menu">

                            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" class="w-100">
                                <el-form-item v-if="!form.id" label="父级菜单" prop="label">
                                    <span>{{ currentNode.label || "无" }}</span>
                                </el-form-item>


                                <el-form-item label="菜单名称" prop="label">
                                    <el-input clearable v-model="form.label" @input="handleChange" placeholder="请输入菜单名称"
                                        class="w-100"></el-input>
                                </el-form-item>
                                <el-form-item label="菜单路径" prop="path">
                                    <span @click="editPath = true" v-if="!editPath">{{ form.path || "输入后自动生成"
                                        }}</span>
                                    <el-input @blur="editPath = false" v-if="editPath" v-model="form.path"
                                        placeholder="请输入菜单路径" class="w-100"></el-input>
                                </el-form-item>
                                <el-form-item label="菜单图标" prop="icon">
                                    <div class="w-100">
                                        <x-cmpnt-render :cmpnt="iconCmpnt" :data="form"></x-cmpnt-render>
                                    </div>

                                </el-form-item>
                            </el-form>
                            <span class="mt-5 d-flex justify-content-end">
                                <el-button @click="clear">返回</el-button>
                                <el-button type="primary" @click="handleSubmit">确定</el-button>
                            </span>
                        </el-tab-pane>

                    </el-tabs>
                    <span v-if="!menuLabel" class="d-flex justify-content-center align-items-center">
                        <span class="mt-5">操作左侧菜单可以添加或编辑菜单</span>
                    </span>

                </el-col>
            </el-row>

        </el-dialog>
    </div>
</template>


<style scoped>
i:hover {
    opacity: 0.6;
}

.tree-label:hover .opacity-0 {
    opacity: 1 !important;
}
</style>